import React, { Component } from 'react'
import { Col, Icon, Row, Tabs } from 'antd'
import { TwsBelongTask } from 'tws-antd'
import { connect } from 'react-redux'
import '../less/index.less'
import { withRouter } from 'react-router-dom'
import SingleChoiceQuiz from './common/single-choice-quiz'
import UrlPattern from 'url-pattern'
import * as taskActions from '../actions/task'
import * as assignment from '../actions/assignment'
import * as userActions from '../actions/user'
import { FormattedMessage } from 'react-intl'
import { getLangFromLocalStorage } from '../constant/lang-util'
import AssignmentTagBox from './common/assignment-tag-box'
import AssignmentRankingBox from './common/assignment-ranking-box'
import * as assignmentQuizMarkAction from '../actions/assignment-quiz-Mark'


class AssignmentPageBody extends Component {
  state = {
    sectionId: 0,
    programId: 0,
    studentId: 0,
    taskId: 0,
    assignmentId: 0,
    quizId: 0
  }

  componentWillMount = () => {
    const pattern = new UrlPattern('/tutor/program/:programId/task/:taskId/student/:studentId/assignment/:assignmentId/quiz/:quizId')
    const urlParams = pattern.match(this.props.location.pathname.replace('divider/', '')) || {}
    const {assignmentId, studentId, taskId, programId, quizId} = urlParams
    this.setState({assignmentId, studentId, taskId, programId, quizId}, () => {
      this.props.getTaskInfo(taskId)
      this.props.getSurveyQuizAssignment(assignmentId, studentId)
      this.props.tutorGetStudentReviewQuiz(studentId, assignmentId)
      this.props.getStudent(studentId)
      const quizId = assignmentId
      this.props.getAssignmentQuizMark(assignmentId, quizId, studentId)
    })
  }

  getCompleteName = (student) => {
    const name = student.name || ''
    const userName = student.userName || ''

    return `${name}(@${userName})`
  }

  render () {
    const {assignment, settings, assignmentQuizMark, taskInfo} = this.props
    const {studentId, assignmentId, programId, quizId} = this.state
    const {quizzes, reviewQuiz, student} = assignment
    const {task} = taskInfo
    const {tutorUrl} = settings
    const assignments = task.assignments || []
    const currentAssignment = assignments.find(assignment => assignment.id === parseInt(assignmentId)) || {}
    const completeName = this.getCompleteName(student)

    const lang = getLangFromLocalStorage()

    return <div>
      <div>
        <Row>
          <Col span={8}>
            <h2>{currentAssignment[`title_${lang}`] || currentAssignment.title}</h2>
          </Col>
        </Row>
        <Row>
          <Col>
            <div><Icon type='user'/> {completeName}</div>
          </Col>
        </Row>
      </div>

      <TwsBelongTask title={<FormattedMessage id={'所属任务卡'}/>}>
        <a
          href={tutorUrl + `/program/${this.state.programId}/task/${this.state.taskId}/student/${this.state.studentId}`}>
          <Icon type='arrow-left'/>
          {task[`title_${lang}`] || task.title}
        </a>
        <AssignmentTagBox
          programId={programId}
          assignmentId={assignmentId}
          quizId={quizId}
          studentId={studentId}
        />
      </TwsBelongTask>

      <div className='margin-t-3'>
        <h3><FormattedMessage id={'作业内容'}/></h3>
        {
          reviewQuiz.id
            ? <span className='submit-time-box'>
              <Icon type='clock-circle'/>
              {reviewQuiz.createTime}
            </span>
            : ''
        }
        <div className='margin-t-2'>
          <div style={{background: 'white'}}/>
          {
            quizzes.map((quiz, index) => {
              return <SingleChoiceQuiz
                key={index}
                index={index}
                quiz={quiz}
                isTutor/>
            })
          }
        </div>
      </div>
      <AssignmentRankingBox
        programId={programId}
        assignmentId={assignmentId}
        quizId={quizId}
        studentId={studentId}
        assignmentQuizMark={assignmentQuizMark}
      />
    </div>
  }
}

const mapStateToProps = ({user, taskInfo, assignment, settings, assignmentQuizMark}) => ({
  user,
  taskInfo,
  assignment,
  settings,
  assignmentQuizMark
})
const mapDispatchToProps = dispatch => ({
  getTaskInfo: (taskId) => dispatch(taskActions.getTaskInfo(taskId)),
  getSurveyQuizAssignment: (assignmentId, studentId) => dispatch(assignment.getMyStudentAssignment(assignmentId, studentId)),
  tutorGetStudentReviewQuiz: (studentId, assignmentId) => dispatch(assignment.tutorGetStudentReviewQuiz(studentId, assignmentId)),
  getStudent: (studentId) => dispatch(userActions.getCurrentStudent(studentId)),
  getAssignmentQuizMark: (assignmentId, quizId, studentId) => dispatch(assignmentQuizMarkAction.getAssignmentQuizMark(assignmentId, quizId, studentId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssignmentPageBody))
